:root {
  --tab-size: 8;
  --tab-space: calc((var(--tab-size) / 4) * 1em);
  --tab-indicator-top: 0;
  --tab-indicator-left: 0;
  --tab-indicator-width: 0;
  --tab-indicator-height: 0;
}

.tab {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas:
    "nav"
    "content";
  gap: calc((var(--tab-size) / 4) * 1em);
  position: relative;
  width: 100%;
}

.tab-hide-content {
  grid-template-rows: auto;
  grid-template-areas:
    "nav";
}

.tab-nav {
  background-color: hsl(var(--theme-primary-020));
  border-radius: calc((var(--theme-radius) * 0.01em) + ((var(--tab-size) / 4) * 0.125em));
  padding: calc((var(--tab-size) / 4) * 0.125em);
  grid-area: nav;
  display: flex;
  position: relative;
  transition: background-color var(--layout-transition-extra-fast);
}

.disabled .tab-nav {
  background-color: transparent;
}

.tab-nav-group {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc((var(--tab-size) / 4) * 0.125em);
}

@media (min-width: 800px) {
  .tab-nav-group {
    flex-wrap: nowrap;
  }
}

.tab-nav-button {
  background-color: transparent;
  border: 0;
  flex-grow: 1;
  flex-basis: 25%;
  z-index: 2;
}

@media (min-width: 600px) {
  .tab-nav-button {
    flex-basis: auto;
  }
}

.tab-nav-button:focus,
.tab-nav-button:active {
  transition: background-color 0s, color var(--layout-transition-extra-fast);
}

.tab-nav-button.active {
  background-color: transparent;
  color: hsl(var(--theme-accent-text));
  transition: background-color 0s, color var(--layout-transition-extra-fast);
}

.tab.disabled .tab-nav-button {
  background-color: transparent;
}

.tab.disabled .tab-nav-button.active {
  background-color: hsl(var(--theme-primary-020));
  color: hsl(var(--button-text-disabled));
}

.tab-nav-indicator {
  background-color: rgb(var(--theme-accent));
  border-radius: calc(var(--theme-radius) * 0.01em);
  opacity: 1;
  position: absolute;
  top: calc(var(--tab-indicator-top) * 1px);
  left: calc(var(--tab-indicator-left) * 1px);
  width: calc(var(--tab-indicator-width) * 1px);
  height: calc(var(--tab-indicator-height) * 1px);
  pointer-events: none;
  z-index: 1;
  animation: circle-out var(--layout-transition-extra-fast) 1;
}

.tab-nav-indicator-active .tab-nav-indicator {
  animation: none;
  transition: top var(--layout-transition-extra-fast), left var(--layout-transition-extra-fast), width var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast), opacity var(--layout-transition-extra-fast);
}

.tab.disabled .tab-nav-indicator {
  opacity: 0;
}

.tab-content {
  grid-area: content;
}

.tab-hide-content .tab-content {
  display: none;
}